<template>
  <div class="delivery-append-table">
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      size="small"
      :scroll="{ x: 1400 , y: 580}"
    >

      <span slot="amount" slot-scope="text">
        {{divide3Float3Fixed(text)}}
      </span>
      <span slot="price" slot-scope="text">
        {{divide3Float3Fixed(text)}}
      </span>

    </a-table>
    <div class="statistics">
      <h3 class="total-amount">
        总金额：<span>{{divide3Float3Fixed(totalAmount)}}</span>
      </h3>
      <h3 class="selected-length">
        订单量：<span>{{orderQuantity}}</span>
      </h3>
    </div>
  </div>
</template>

<script>
import {
  deliveryAppendColumns
} from './init/tableInit.js';

import {
  orderListByClientIdReq
} from '@/requests/orderRequests';

import {
  divide3Float3Fixed
} from '@/utils/NumberChange.js'

export default {
  name: "DeliveryAppendTable",
  props: {

  },
  data() {
    return {
      data: [],
      columns: deliveryAppendColumns,
      totalAmount: 0,
      selectedRowKeys: [],
      orderQuantity: 0,
      ans: [],
    };
  },
  methods: {
    divide3Float3Fixed,
    onSelectChange(selectedRowKeys) {
      if (selectedRowKeys.length <= 10) {
        this.selectedRowKeys = selectedRowKeys;
        // 筛选所有被选中的行
        this.ans = this.data.filter((value, index) => selectedRowKeys.includes(value.key));
        const sum = this.ans.reduce(function (accumulator, currentValue) {
          return accumulator + currentValue.amount;
        }, 0);
        this.orderQuantity = this.ans.length;
        this.totalAmount = sum;
      }
      // 限制最大选择数量为 10
      else {
        this.$notification['warning']({
          message: '过多的订单选择项',
          description: '一张送货单最多容纳10张订单',
          duration: 2,
        });
      }
    },
  },
  computed: {
  },
  mounted() {
    const clientId = this.$route.params.clientId;
    const loaded = this.$message.loading('正在加载用户未送货的订单数据', 0);
    orderListByClientIdReq(clientId).then((res) => {
      loaded();
      const orders = res.data;
      this.data = orders.map(value => {
        value.key = value.id;
        return value;
      });
    }).catch((err) => {
      loaded();
      this.$notification['error']({
        message: '新增送货单',
        description:
          `获取未送货订单失败，失败信息 ${err.response.data.message}`,
      });
    });
  },
  watch: {

  },

  components: {
    
  },
};
</script>

<style scoped lang="scss">

</style>


<style lang="scss">
.delivery-append-table {
  overflow: auto;
  width: calc(100vw - 300px);
  >.statistics {
    display: flex;
    justify-content: flex-end;


    margin-top: 20px;
    margin-right: 200px;

    >h3 {
      padding: 10px;
      margin-left: 20px;
      border: 1px solid gray;

      >span {
        color: rgb(45, 87, 59);
      }

      
    }

    >.selected-length {
      color: rgb(41, 138, 133);
    }
  }
}
</style>
